<template>
    <div class="ad-release-box">
        <div class="name" v-t="'detail.title4'">Ad Serving Data</div>
        <div class="min-page">
            <div class="time">{{detail.adStartTime}} - {{detail.adEndTime}}</div>
            <div class="min-view"  v-t="'detail.title5'">Distribution Reward Statistics</div>
            <div class="qq-ada-tab" v-if="awards.totalGrantBonus">
                <ul>
                    <li>
                        <p v-t="'analysis.table1'">Total</p>
                        <h5>{{awards.totalGrantBonus.decimalTwoString || 0}}</h5>
                    </li>
                    <li>
                          <p v-t="'analysis.table2'">Today</p>
                        <h5>{{awards.todayGrantBonus.decimalTwoString || 0}}</h5>
                    </li>
                    <li>
                        <p v-t="'analysis.table3'">Week</p>
                        <h5>{{awards.weekGrantBonus.decimalTwoString || 0}}</h5>
                    </li>
                    <li>
                        <p v-t="'analysis.table4'">Month</p>
                        <h5>{{awards.monthGrantBonus.decimalTwoString || 0}}</h5>
                    </li>
                </ul>
            </div>
        </div>
        <p class="msstxt">1UV+1 click=0.05CXT($0.05)</p>
        <div class="tips">
            <!-- <span @click="showFlag=true">View the reward distribution trend chart</span> -->
            <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="4" width="75%" height="80%">
                <div class="jlffqsstbox">
                    <reward-provide-trend-chart id="jlffqs1" :objectId="detail.adPlaceJobRecordId"/>
                </div>    
            </my-dailog>
        </div>
        <!-- <div class="release-tjttt">
            <Title>User Click Period Statistics</Title>
        </div> -->
        <div class="ads-visit-chart-box3">
            <div class="poppu-view">
                <div class="title" v-t="'detail.title6'">User Click Period Statistics</div>
                <div class="btn-right" @click="showFlag=true">
                    <img  src="/images/m-right.png" />
                </div>
            </div>
            <uv-pv-chart :objectId='detail.adPlaceId' 
            :visitTypeCode='6' :operateType='11' 
            :objectTwoId="detail.adPlaceJobRecordId" 
            :showTab="false" 
            :uv='false' 
            :showLegend="false"/>
        </div>
         <!-- <div class="qq-ads-view">
            <my-button text="Add" class="btn-add" @click="addAwaitRecord"/>
        </div> -->
        <!-- <div class="tips">
            <span @click="showFlag2=true">User click period statistics</span>
            <my-dailog v-model:show="showFlag2" :showtopclose="true" :styleType="4" width="75%" height="80%">
                <click-time-chart/>    
            </my-dailog>
        </div> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import rewardProvideTrendChart from './rewardProvideTrendChart.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
import { toast } from '@/utils/common'
import { useI18n } from 'vue-i18n'

//import clickTimeChart from './clickTimeChart.vue'
export default {
    props:{
        detail:{
            type:Object,
            defalult:{}
        }
    },
    components:{
        Title,
        rewardProvideTrendChart,
        uvPvVisits,
        //clickTimeChart
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            showFlag2:false,
            awards:{}
        })

        onMounted(()=>{
            getAwardData()
        })
        
        // 奖励发放统计
        const getAwardData = async()=>{
            const res = await store.dispatch("ad/get_award_statistics", {
                adPlaceJobRecordId: props.detail.adPlaceJobRecordId,
                //  walletAddress: props.detail.adPlaceOwnerWallet
                walletAddress: props.detail.adPlaceMerchantWallet
            });
            if(res.success){
                state.awards = res.data || {}
            }
        }
        const addAwaitRecord = (adDays)=>{
            store.dispatch('ad/add_wait_release',{
                adDays:adDays,
                adPlaceId:props.detail.adPlaceId,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                if(res.success){
                    toast('Added Successfully')
                }else{
                    toast(res.message)
                }
            })
        }
        return{
            ...toRefs(state),
            addAwaitRecord
        }
    }
}
</script>

<style lang="scss" scoped>
    .ad-release-box{
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #fff;
        font-size: 22px;
        position: relative;
        .name{
            font-size: 28px;
        }
        .min-page{
            border:1px solid #67F8FF;
            background-color: #67F8FF50;
        }
        .time{
            padding: 10px 0 10px 0;
            background-color:#67F8FF50;
            color:#fff;
            font-size:20px;
            text-align: center;
            border-bottom:1px solid #67F8FF;
        }
        .min-view{
          background: linear-gradient(180deg, rgba(0,74,217,0) 0%, #004AD9 100%);
          padding:10px 0;
          text-align: center;
          margin:0 auto;
          width:96%;
        }
        .qq-ada-tab{
            padding: 0;
            margin:0;
            ul{
                display: flex;
                li{
                    flex: 1;
                    text-align: center;
                    padding: 10px 0;
                    h5{
                        padding: 0 0 10px 0;
                        margin: 0;
                        font-size: 500;
                        font-size: 26px;
                        color: #67F8FF;
                    }
                    p{
                        color: rgba(255,255,255,0.6);
                    }
                }
            }
        }
        .msstxt{
            padding: 10px 0 0 0;
            text-align: right;
            font-size:20px;
            color:#fff;
        }
        .tips{
            font-size: 22px;
            color: #55C8E7;
            text-align: left;
            padding: 15px 0 0 0;
            text-align: center;
            position: relative;
            z-index: 10;
            span{
                text-decoration: underline;
            }
        }
    }
    .release-tjttt{
        padding: 30px 0 0 0;
    }
    .ads-visit-chart-box3{
        height: 300px;
        border:1px solid #67F8FF;
        padding:10px 0 40px 0;
        background-color: #67F8FF50;
        .poppu-view{
            display: flex;
            justify-content: space-between;
            padding:0 20px;
            align-items: center;
            align-self: center;
            .title{
                color:#fff;
                font-size:24px;
            }
            .btn-right{
              img{
                height:20px;
              }
            }
        }
    }
    .jlffqsstbox{
        height: 570px;
        .chartBox{
            height: 100%;
        }
    }
        .qq-ads-view{
           position: absolute;
           bottom:-20px;
           left:0;
           z-index: 999;
           .btn-add{
             background-image: url(/images/add.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width:180px;
                height:60px;
        }
    }
</style>